<template>
  <div class="wrapper_app">
    <Paipan v-if="showPage[0] == 1" />
    <ShenSha v-if="showPage[1] == 1" />
    <More v-show="showPage[2] == 1" />
    <Cord v-if="showPage[3] == 1" />

    <div class="btm_nav_list lr_nav_top_bd">
      <div class="item">
        <i
          style="font-size: 23rem"
          class="iconfont lricon-zhuye list-item"
          :class="{ show_class: showPage[0] == 1 }"
          @click="go(0)"
        ></i>
        <div class="tit" :class="{ show_class: showPage[0] == 1 }">主页</div>
      </div>
      <div class="item">
        <i
          style="font-size: 22rem"
          class="iconfont lricon-shuji1 list-item"
          :class="{ show_class: showPage[1] == 1 }"
          @click="go(1)"
        ></i>
        <div class="tit" :class="{ show_class: showPage[1] == 1 }">资料</div>
      </div>
      <div class="item">
        <i
          style="font-size: 22rem"
          class="iconfont lricon-gengduo list-item"
          :class="{ show_class: showPage[2] == 1 }"
          @click="go(2)"
        ></i>
        <div class="tit" :class="{ show_class: showPage[2] == 1 }">课例</div>
      </div>
      <div class="item">
        <i
          class="iconfont lricon-wode list-item"
          :class="{ show_class: showPage[3] == 1 }"
          @click="go(3)"
        ></i>
        <div class="tit" :class="{ show_class: showPage[3] == 1 }">我的</div>
      </div>
    </div>
    <router-view v-slot="{ Component }">
      <transition :name="transitionName">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>
<script>
import { setStatusBarColor } from "tauri-plugin-status-bar-color-api";
import ShenSha from "./view/ZiLiao.vue";
import Paipan from "./view/PaipanOption.vue";
import Cord from "./view/Cord.vue";
import More from "./view/More.vue";
import { getAppStore } from "./api/store";
export default {
  components: {
    ShenSha,
    Paipan,
    Cord,
    More,
  },
  data() {
    return {
      ganzhi: null,
      shensha: null,
      showPage: [0, 1, 0, 0],
      showClass: "show_class",
      prevTransition: "", // 上一个路由的动画
      currentTransition: "", // 当前路由的动画
      transitionName: "slide-left",
    };
  },

  async created() {
    let appstore = await getAppStore();
    let appSettings = await appstore.get('appSettings')
    if (appSettings == undefined) {
      await appstore.set('appSettings', {
        lr_root_size: 1,
        lr_rd_txt_size: 14.5,
        lr_rd_bgc: "#ebe3ca",
        lr_rd_txt_color: "#000000",
        lr_pp_shen_size: 18,
        lr_pp_dungan_size: 12,
        lr_pp_jiang_size: 18,
        lr_pp_shensha_size: 12,
        lr_pp_zhangsheng_size: 12,
        lr_pp_sksc_size: 17,
        lr_pp_kexuan_size: 10,
        lr_pp_show_shengjutian: false,
        lr_pp_show_shenjudi: false,
        lr_pp_show_rizhangsheng: false,
        lr_pp_show_zhizhangsheng: false,
        lr_zl_px_index: 0,
        lr_zl_zhiding_id: -1,
      })
    }
    const safeTop = getComputedStyle(document.documentElement).getPropertyValue(
      "--safe-top"
    );
    document.documentElement.style.setProperty("--nav_bg_color", "white");
    // document.documentElement.style.setProperty('--nav_bg_color', '#bab9b9');
    // document.documentElement.style.setProperty('--nav_bg_color', 'rgba($color: #00000000, $alpha: 0)');

    document.documentElement.style.setProperty("--nav_btn_height", "6.7rem");
    document.documentElement.style.setProperty("--cart_bg_color", "#E91E63");
    document.documentElement.style.setProperty("--btn_fbg_color", "rgb(72, 13, 13)");
    // document.documentElement.style.setProperty('--btn_bg_color', '#ffffff');
    document.documentElement.style.setProperty("--btn_bg_color", "#bab9b9");
    document.documentElement.style.setProperty("--txt_warn_color", "red");
    document.documentElement.style.setProperty("--txt_secu_color", "green");
    document.documentElement.style.setProperty(
      "--lr_overlay_color",
      "rgba(0, 0, 0, 0.3)"
    );
    document.documentElement.style.setProperty("--lr_root_size", "1px");
    document.documentElement.style.setProperty("--lr_nbh", "6.7rem");
    document.documentElement.style.setProperty("--lr_btnitc", "rgb(72, 13, 13)");
    document.documentElement.style.setProperty("--lr_lbgc", "whitesmoke");
    document.documentElement.style.setProperty("--lr_dbgc", "whitesmoke");
    document.documentElement.style.setProperty("--lr_lcbgc", "white");
    document.documentElement.style.setProperty("--lr_dcbgc", "#7b3527");
    document.documentElement.style.setProperty("--lr_nav_bdc", "#efefef");
    document.documentElement.style.setProperty("--lr_lbdc", "#efefef");
    document.documentElement.style.setProperty("--lr_rdbgc", "#ebe3ca");
    document.documentElement.style.setProperty("--lr_rdfs", "14.5rem");
    document.documentElement.style.setProperty("--lr_rdtxtc", "#000000");
    document.documentElement.style.setProperty("--lr_nav_txtc", "#000000");
    document.documentElement.style.setProperty("--nav_bgc", "white");
    // --------------------------------------------------------------------
    document.documentElement.style.setProperty("--lr_nav_height", "53rem");
    document.documentElement.style.setProperty("--lr_status_height", safeTop);
    document.documentElement.style.setProperty("--lr_pp_shen_size", "18rem");
    document.documentElement.style.setProperty("--lr_pp_dungan_size", "12rem");
    document.documentElement.style.setProperty("--lr_pp_jiang_size", "18rem");
 document.documentElement.style.setProperty("--lr_pp_zhangsheng_size", "12rem");
    document.documentElement.style.setProperty("--lr_pp_shensha_size", "12rem");
    document.documentElement.style.setProperty("--lr_pp_sksc_size", "17rem");
    document.documentElement.style.setProperty("--lr_pp_kexuan_size", "10rem");
    document.documentElement.style.setProperty("--lr_active_bgc", "#E0E0E0");
    setStatusBarColor("#ffffff");
    localStorage.setItem("isWx", "ok");
  },
  methods: {
    go(index) {
      this.showPage[index] = 1;
      console.log(this.showPage);
      for (let i = 0; i < this.showPage.length; i++) {
        if (i !== index) {
          this.showPage[i] = 0;
        }
      }
    },
  },
  watch: {
    $route(to, from) {
      console.log(to);
      if (to.path == "/paipan") {
        this.transitionName = "slide-left";
      } else if (to.path == "/bookRead") {
        this.transitionName = "slide-left";
      } else if (to.path == "/bookTanChuang") {
        this.transitionName = "slide-down";
      } else if (to.path == "/rili") {
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-left";
      }
    },
  },
  mounted() {
    // 初始化默认动画
    this.currentTransition = this.$route.meta.transition || "slide-left";
  },
};
</script>

<style lang="scss" scoped>
$border-color: #efefef;

.slide-left-enter-active {
  transition: all 0.3s ease-out;
}

.slide-left-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-enter-to {
  opacity: 1;
  transform: translateX(0);
}

/* 离开动画 */
.slide-left-leave-active {
  transition: all 0.3s ease-out;
}

.slide-left-leave-from {
  opacity: 1;
  transform: translateX(0);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.wrapper_app {
  position: fixed;
  width: 100vw;
  height: 100vh;
  // background: url('./assets/素材/chatu.png');
  // background-color: #ff8622;
  background-repeat: no-repeat;
  background-size: cover;
  /* 关键属性：保持比例并覆盖整个容器 */
  background-position: center;
  background-attachment: fixed;

  .view {
    height: fit-content;
    width: fit-content;
  }

  .btm_nav_list {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    height: 53rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--nav_bg_color);

    .item {
      width: 16vw;
      display: flex;
      justify-content: start;
      align-items: center;

      flex-direction: column;

      .tit {
        color: var(--btn_bg_color);
        // color: white;
      }

      .list-item {
        // color: var(--btn_bg_color);
        font-size: 24px;
        &:active {
         transition: transform 0.3s ease;
        transform: scale(1.2)
        }
      }

      letter-spacing: 1px;

      .show_class {
        color: #7b3527;
        color: #e91e63;
      }

      i {
        -webkit-text-stroke: 1.5rem#E91E63;
        /* 兼容webkit内核浏览器，如Chrome、Safari */
        text-stroke: 1.5rem#E91E63;
        /* 标准语法，但部分浏览器可能不支持 */
        color: #ffffff;
      }

      div {
        text-align: center;
        font-size: 10px;
        color: #ffffff;
        height: 14px;
        line-height: 14px;
      }

      .div:active {
        // background-color: #12ca93;
        font-size: 12px;
        transition: 0.3s;
      }
    }
  }
}
</style>
